<template>
  <div class="container">
    <div class="table-content">
      <a-table
        class="table"
        :columns="columns"
        :data-source="store.invitationList"
        :loading="store.loading"
        :scroll="{ x: 1500, y: 750 }"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <div v-if="column.key === 'operation'">
            <a-button type="link" size="small" @click="handleAccept(record)">接受</a-button>
            <a-button type="link" size="small" @click="handleReject(record)">拒绝</a-button>
          </div>
        </template>
      </a-table>
    </div>
    <div class="page-content">
      <a-pagination
        v-if="store.total > 0"
        v-model:page-size="store.pageSize"
        :page-size-options="['10', '20', '50']"
        :total="store.total"
        :show-total="total => `共 ${total} 条`"
        show-size-changer
        @change="onPageChange"
      >
      </a-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useInvitationStore } from '@/stores/invitationStore'
import { useUserStore } from '@/stores/userStore'
import { message } from 'ant-design-vue'
import server from '@/api/index'
import dayjs from 'dayjs'

const store = useInvitationStore()
const userStore = useUserStore()

const columns = [
  {
    title: '用户名',
    dataIndex: 'userName',
    key: 'userName',
    width: 100,
    fixed: 'left',
  },

  {
    title: '公司名称',
    dataIndex: 'companyName',
    key: 'companyName',
    width: 150,
    fixed: 'left',
  },
  {
    title: '职位ID',
    dataIndex: 'positionId',
    key: 'positionId',
    width: 150,
  },
  {
    title: '职位名称',
    dataIndex: 'positionName',
    key: 'positionName',
    width: 150,
  },
  {
    title: 'HRID',
    dataIndex: 'hrId',
    key: 'hrId',
    width: 150,
  },
  {
    title: 'HR姓名',
    dataIndex: 'hrName',
    key: 'hrName',
    width: 150,
  },
  {
    title: '邀约状态',
    dataIndex: 'status',
    key: 'status',
    width: 150,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 200,
    fixed: 'right',
  },
]

const getMyInvitationList = async () => {
  try {
    const res = await server.getlistInvitationVOByPage({
      current: store.page,
      pageSize: store.pageSize,
      userId: userStore.userAccount,
    })
    if (res.data.code === 0) {
      store.invitationList = res.data.data.records
      store.total = res.data.data.total
      store.invitationList.map(item => {
        switch (item.status) {
          case 1:
            item.status = '已发起'
            break
          case 2:
            item.status = '已接受'
            break
          case 3:
            item.status = '已通过'
            break
          case 4:
            item.status = '已确认'
            break
          case 5:
            item.status = '已拒绝'
            break
        }
        item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
      })
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}

const handleAccept = async record => {
  try {
    const res = await server.editInvitation({
      id: record.id,
      userId: userStore.userAccount,
      status: 2,
      hrId: record.hrId,
      hrName: record.hrName,
      positionId: record.positionId,
    })
    if (res.data.code === 0) {
      message.success('成功接受')
      getMyInvitationList()
    } else {
      message.error('接受失败')
    }
  } catch (error) {
    message.error(error)
  }
}

const handleReject = async record => {
  try {
    const res = await server.editInvitation({
      id: record.id,
      userId: userStore.userAccount,
      status: 5,
      hrId: record.hrId,
      hrName: record.hrName,
      positionId: record.positionId,
    })
    if (res.data.code === 0) {
      message.success('拒绝接受')
      getMyInvitationList()
    } else {
      message.error('拒绝失败')
    }
  } catch (error) {
    message.error(error)
  }
}
const onPageChange = async (page, pageSize) => {
  store.page = page
  store.pageSize = pageSize
  getMyInvitationList()
}

onMounted(() => {
  getMyInvitationList()
})
</script>

<style lang="scss" scoped>
.container {
  // display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .form-content {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0;

    .search-botton {
      margin-right: 10px;
    }
  }

  .table-content {
    padding: 15px;
  }

  .page-content {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
  }
}
</style>
